<template>
    <div class="iot_HomeMenu">
    <el-row class="tac">
      <el-col :span="12">
        <el-menu
          active-text-color="#27ba9b"
          background-color="#f7f7f7"
          class="el-menu-vertical-demo"
          default-active="1"
          text-color="#000"
          @open="handleOpen"
          @close="handleClose"
        >
          <el-menu-item index="1" @click="ChangeIndexFlog(0)">
            <span>首页</span>
          </el-menu-item>
          <el-sub-menu index="2">
            <template #title>
              <span>热门推荐</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="1-1" @click="ChangeIndexFlog(1)">特惠推荐</el-menu-item>
              <el-menu-item index="1-2" @click="ChangeIndexFlog(2)">爆款推荐</el-menu-item>
              <el-menu-item index="1-3" @click="ChangeIndexFlog(3)">一站全买</el-menu-item>
              <el-menu-item index="1-4" @click="ChangeIndexFlog(4)">新鲜好物</el-menu-item>
            </el-menu-item-group>
          </el-sub-menu>
        </el-menu>
      </el-col>
    </el-row>
  </div>
  </template>
  
  <script>
import { inject } from 'vue';

    export default{
        name:'HomeMenu',
        setup(){
          const ChangeIndexFlog = inject('ChangeIndexFlog')
          return {ChangeIndexFlog}
        }
    }
  </script>

<style scoped>
  .el-col-12{
    max-width:100%;
  }
  .el-menu{
    border: 0;
  }
  .iot_HomeMenu{
    margin: 5px auto;
  }
</style>
<style>
    :root{
    --el-menu-item-height:40px !important;
  }
</style>
